<template>
	<Grid :col="3" :border="false" padding="5px" v-auth:login:log:search>
	  <GridItem><Input  placeholder="请输入操作人员" v-model="search.username"/></GridItem>
	  <GridItem> <Input  placeholder="请输入IP地址" v-model="search.ip"/></GridItem>
	  <GridItem><Input  placeholder="请输入操作地点" v-model="search.address"/></GridItem>
	  <GridItem>
		  <Select style="width:100%" clearable  placeholder="请选择操作状态" v-model="search.status">
			  <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
		  </Select>
	  </GridItem>
	  <GridItem>
      <DatePicker type="daterange" confirm placement="bottom-end" v-model="times" placeholder="请选择操作时间" style="width: 100%;"/>
    </GridItem>
	  <GridItem><Button icon="md-search" type="primary" @click="searchText">查询</Button></GridItem>
	</Grid>
	
</template>

<script setup>
import {defineProps, defineEmits, reactive, ref, watch} from 'vue' ;

const props = defineProps({
  modelValue: {
     type: Object,
     required: true
  }
});

const emits = defineEmits(["update:model-value", "search"])
const statusList = reactive([{label: '登录成功',  value: 1},  {label: '登录异常', value : 0}]);
const times = ref(["", ""]) ;
const search = reactive({}) ;

function formatDate(date) {
  if (date === "") return null ;
  let year = date.getFullYear();
  let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1 ;
  let day =date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  return `${year}-${month}-${day}`
}

watch(times, (array)=> {
    search.start = formatDate(array[0]) ;
    search.end = formatDate(array[1]) ;
})


function searchText(){
  emits("update:model-value", search) ;
  emits("search" , search) ;
}


</script>

<style>
</style>